import { Form, Input, Button, Select, Tooltip, Space, Table } from 'antd';
import {
  SearchOutlined,
  DeleteOutlined,
  PlusOutlined,
  AppstoreOutlined,
  SyncOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import './index.less';
import { useDispatch } from 'umi';
import { useState } from 'react';
export default function ProdProdList() {
  const dispatch = useDispatch();
  const columns: any[] = [
    {
      key: 'transName',
      title: '模板名称',
      dataIndex: 'transName',
      width: 600,
      align: 'center',
    },
    {
      key: 'action',
      title: '操作',
      width: 200,
      dataIndex: 'action',
      align: 'center',
      render: (text: any, record: any, index: any) => (
        <Space size="middle">
          <Button type="primary" icon={<EditOutlined />}>
            修改
          </Button>
          <Button
            type="primary"
            danger
            icon={<DeleteOutlined />}
            onClick={() => {}}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const [form] = Form.useForm();
  const [isShow, setIsShow] = useState(true);
  const { Option } = Select;
  const [select, setSelect] = useState<string[]>([]);

  // 搜索
  const onFinish = (values: any) => {};
  // 清空
  const onReset = () => {};
  const handleChange = () => {};
  const onShow = () => {
    setIsShow(!isShow);
  };
  const data: any[] | undefined = [];
  return (
    <div className="prod-prodList">
      {isShow ? (
        <Form layout="inline" form={form} onFinish={onFinish}>
          <Form.Item name={`transName`} label="产品名字">
            <Input placeholder="产品名字" />
          </Form.Item>
          <Form.Item name="state" label="状态">
            <Select
              placeholder="状态"
              style={{ width: 191 }}
              allowClear
              onChange={handleChange}
            >
              <Option value="0">未上架</Option>
              <Option value="1">上架</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              搜索
            </Button>
          </Form.Item>
          <Form.Item>
            <Button icon={<DeleteOutlined />} onClick={onReset}>
              清空
            </Button>
          </Form.Item>
        </Form>
      ) : null}
      <div className="prodList_Main">
        <div className="prodList_left">
          <Form layout="inline">
            <Form.Item>
              <Button type="primary" icon={<PlusOutlined />}>
                新建
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                danger
                disabled={select.length ? false : true}
              >
                删除
              </Button>
            </Form.Item>
          </Form>
        </div>
        <div className="prodList_right">
          <Tooltip title="刷新">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="显隐">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="搜索">
            <Button
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onShow}
            />
          </Tooltip>
        </div>
        
      </div>
      <div className="prodlist">
          <div className="claen">
            {' '}
            <div>当前表格已选择 {select.length} 项</div>&nbsp;<a>清空</a>
          </div>
          <Table
            bordered={true}
            columns={columns}
            dataSource={data}
            rowSelection={{ type: 'checkbox' }}
          />
        </div>
    </div>
  );
}
